<!--
 * @Description: 
 * @Author: chenjiaxin
 * @Date: 2022-09-03 15:49:50
 * @LastEditTime: 2022-09-04 14:55:28
 * @FilePath: \vue-ts-vite\src\App.vue
-->
<script setup lang="ts">
import { provide, ref, nextTick } from "vue";
import type { InjectionKey } from "vue";
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
// import HelloWorld from './components/HelloWorld.vue'
import { zhCN, dateZhCN } from "naive-ui";
import AppProvider from "@/components/app-provider";
import Layout from "./views/layout/index.vue";
import type { IAppProvoidKey } from "@/types";

const key = Symbol() as InjectionKey<string>;
// const msgKey: InjectionKey<string> = "testKey";
const isRefresh = ref(false);
provide<IAppProvoidKey>("msgKey", {
  name: "vite 项目",
  isRefresh: false,
  // 刷新函数 先卸载App.vue 根组件内的全部组件 然后再加载  起到一个页面无闪动效果
  refreshFn: () => {
    isRefresh.value = true;
    nextTick(() => {
      isRefresh.value = false;
    });
  },
}); // 若提供的是非字符串值会导致错误
</script>

<template>
  <!-- <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" /> -->
  <!-- <router-link to="/">首页</router-link>
  <span>|</span>
  <router-link to="/about">关于</router-link>
  <router-view></router-view> -->

  <n-config-provider
    style="height: 100%"
    :locale="zhCN"
    :date-locale="dateZhCN"
  >
    <app-provider>
      <!-- <router-view /> -->
      <template v-if="!isRefresh">
        <Layout></Layout>
      </template>
    </app-provider>
  </n-config-provider>
</template>

<style scoped>
/* .logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
} */
</style>
